<template>
	<view class="container">
		<view class="page-body">
			<!-- 搜索框 -->
			<view class="page-section">
				<search-bar :clearable="false" :showCamera="true" placeholder="搜索食物"
					v-on:navigate="goToPage('/pages/health/food/search/search')">
				</search-bar>
			</view>

			<!-- 图表 -->
			<view class="page-section">
				<view class="echarts-container">
					<view class='icon-cotainer'>
						<uni-icons type="compose" size="20"></uni-icons>
					</view>
					<view class="echarts-wrap">
						<mpvue-echarts class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" />
					</view>
				</view>
			</view>

			<!-- 打卡-->

			<view class="page-section">
				<view class="flex-wrp">
					<view class="clock-in" @tap="goToPage('/pages/health/food/clockIn/clockIn')">
						<view class="iconfont icon-icon"></view>
						<text>饮食打卡</text>
					</view>
					<view class="clock-in" @tap="goToPage('/pages/health/sports/clockIn/clockIn')">
						<view class="iconfont icon-yundong"></view>
						<text>运动打卡</text>
					</view>
				</view>
			</view>

			<!-- 记录 -->
			<view class="page-section">
				<view class="record-title">
					<text>我的饮食记录</text>
				</view>
				<view class="record-body" @tap="goToPage('/pages/health/plan/record')">
					<view class="record-content1">
						<text>今日饮食情况：</text>
						<view class="record-item" v-for="(item,i) in meals" :key="i">
							<uni-icons type="smallcircle-filled" size="20"></uni-icons>
							<text>打卡{{i+1}}：{{item.details}} </text>
						</view>
					</view>

					<view class="record-content2">
						<view class="record-item" v-for="(item,i) in nutrients" :key="i">
							<view class="text-box">
								<text>{{item.name}}</text>
							</view>
							<view class="progress-box">
								<progress :percent="item.percent" active stroke-width="3"> </progress>
							</view>
						</view>
					</view>
				</view>

				<view class="page-section">
					<view class="record-title">
						<text>我的运动记录</text>
					</view>
					<view class="record-body" @tap="goToPage('/pages/health/plan/record')">
						<view class="record-content1">
							<text>今日运动情况：</text>
							<view class="record-item" v-for="(item,i) in sports" :key=i>
								<view class="iconfont icon-yundonghuwaileimu"></view>
								<text>打卡{{i+1}}：{{item.details}}</text>
							</view>
						</view>
						<view class="record-content2">
							<view class="record-item" v-for="(item,i) in  exerciseData" :key="i">
								<view class="text-box">
									<text>{{item.name}}</text>
								</view>
								<view class="progress-box">
									<progress :percent="item.percent" active stroke-width="3"> </progress>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="flex-wrp">
					<!-- 喝水记录 -->
					<view class="page-section">
						<view class="record-title" id="water-title">
							<text>我的饮水记录</text>
						</view>
						<view class="record-body" id="water-body">
							<view class="record-water">
								<view>今日已喝：{{water}} ml</view>
								<view class="record-waterContent">
									<!-- picker -->
								</view>
								<button class="water-button" type="primary" size="mini">喝一杯</button>
							</view>
						</view>
					</view>

					<!-- 睡眠记录 -->
					<view class="page-section">
						<view class="record-title" id="sleep-title">
							<text>我的睡眠记录</text>
						</view>
						<view class="record-body" id="sleep-body">
							<view class="record-sleep">
								<!-- picker -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/components/echarts/dist/echarts.min'
	import mpvueEcharts from '@/components/mpvue-echarts'
	import SearchBar from '@/components/SearchBar.vue'
	let chart1 = null;
	export default {
		data() {
			return {
				//用户数据 

				// 图表数据
				echarts,
				// 饮食情况
				meals: [{
						details: '--'
					},
					{
						details: '--'
					},
					{
						details: '--'
					},
				],

				// 营养成分的数组
				nutrients: [{
						name: '热量',
						plan: 0,
						percent: 0.0
					},
					{
						name: '蛋白质',
						plan: 0,
						percent: 0.0
					},
					{
						name: '脂肪',
						plan: 0,
						percent: 0.0
					},
					{
						name: '糖分',
						plan: 0,
						percent: 0.0
					},
					{
						name: '维生素',
						plan: 0,
						percent: 0.0
					},
				],


				//运动打卡情况
				sports: [{
						details: '--'
					},
					{
						details: '--'
					},
					{
						details: '--'
					},
				],
				// 用于接受微信云步数
				stepInfo: [],

				// 运动数据
				exerciseData: [{
						name: '卡路里',
						plan: 0,
						percent: 0.0
					},
					{
						name: '步数',
						plan: 0,
						percent: 0.0
					},
				],


				// 饮水
				water: "--",
			}
		},
		components: {
			mpvueEcharts,
			SearchBar
		},
		onShow() {
			uni.getStorage({
				key: 'sessionId',
				success: function(res) {

				}
			})

			this.init()
		},
		methods: {
			// 初始化
			async init() {
				let that = this
				await this.$https({
					url: this.$baseUrl + '/health/daily',
					success(res) {
						that.getUserRun();
						let d = res.data.data;
						// 饮食部分设置
						that.nutrients[0].plan = d.plan.energy;
						if (d.plan.energy !== 0) that.nutrients[0].percent = d.totalEnergyIngestion / d.plan
							.energy * 100;
						that.nutrients[1].plan = d.plan.protein;
						if (d.plan.protein !== 0) that.nutrients[1].percent = d.totalProteinIngestion / d.plan
							.protein * 100;
						that.nutrients[2].plan = d.plan.fat;
						if (d.plan.fat !== 0) that.nutrients[2].percent = d.totalFatIngestion / d.plan.fat *
							100;
						that.nutrients[3].plan = d.plan.sugar;
						if (d.plan.sugar !== 0) that.nutrients[3].percent = d.totalSugarIngestion / d.plan
							.sugar * 100;
						that.nutrients[4].plan = d.plan.cellulose;
						if (d.plan.cellulose !== 0) that.nutrients[4].percent = d.totalCelluloseIngestion / d
							.plan.cellulose * 100;
						that.exerciseData[0].plan = d.plan.calories;
						if (d.plan.calories !== 0) that.exerciseData[0].percent = d.totalConsumption / d.plan
							.calories * 100;
						that.exerciseData[1].plan = d.plan.path;
					},
					fail(res) {
						console.log(res)
					}
				})
			},

			// 初始化图像
			lineInit(e) {
				let {
					width,
					height
				} = e;
				let canvas = this.$refs.lineChart.canvas;
				echarts.setCanvasCreator(() => canvas);
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(lineChart);
				let that = this
				this.$https({
					url: this.$baseUrl + '/health/echarts',
					success(res) {
						let date = res.data.data.date;
						let ingestion = res.data.data.ingestion;
						let consumption = res.data.data.consumption;
						var option = {
							title: {
								text: '一周健康状况',
								x: 'center',
								y: 'top',

							},
							legend: {
								data: ['消耗量', '摄入量'],
								top: 0,
								left: '70%',
								orient: 'vertical',
								backgroundColor: 'white',
								z: 100
							},
							grid: {
								containLabel: true,
								x: '12',
								y: '20',
								height: '160rpx'
							},
							tooltip: {
								show: true,
								trigger: 'axis'
							},
							xAxis: {
								type: 'category',
								boundaryGap: false,
								data: date,
								name: '日期',
								nameTextStyle: {
									align: 'center',
								},
								// show: false
							},
							yAxis: {
								x: 'center',
								type: 'value',
								splitLine: {
									lineStyle: {
										type: 'dashed'
									}
								},
								name: '变化量（千卡）',
								nameTextStyle: {
									padding: [0, 0, 0, 25]
								}
								// show: false
							},
							series: [{
								name: '消耗量',
								type: 'line',
								smooth: true,
								data: consumption
							}, {
								name: '摄入量',
								type: 'line',
								smooth: true,
								data: ingestion
							}]
						}
						lineChart.setOption(option);
						that.$refs.lineChart.setChart(lineChart);
					}
				})
				
			},

			// 获得微信步数授权
			async getUserRun() {
				let that = this
				await uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.werun']) {
							uni.authorize({
								scope: 'scope.werun',
								success() {
									that.getRunData()
								},
								fail() {
									uni.showModal({
										title: '读取运动数据失败',
										content: '请在小程序右上角【设置】中开启授权'
									})
								}
							})
						} else {
							that.getRunData()
						}
					}
				})
			},

			// 获得微信步数数据
			async getRunData() {
				let that = this
				uni.showLoading({title:"加载中……"});
				await uni.getWeRunData({
					success(res) {
						wx.cloud.init()
						wx.cloud.callFunction({
							name: "getRunData",
							config: {
								env: 'cloud1-6g6qzfike8019fd5'
							},
							data: {
								weRunData: wx.cloud.CloudID(res.cloudID)
							},
						}).then(res => {
							that.stepInfo = res.result.weRunData.data.stepInfoList
							if (that.exerciseData[1].plan !== 0) that.exerciseData[1].percent = that
								.stepInfo[30].step / that.exerciseData[1].plan * 100;
						}).catch(failRes => console.log(failRes))
					},
					complete: () => {
						// 隐藏loading
						uni.hideLoading();
					},
				})
			},


			// 跳转到打卡界面
			goToPage(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style>
	@import './index.css'
</style>
